<template>
    <div class="realtime-container">
        <div class="info">
            <div class="item" v-for="(item, index) in infoItems" :key="index">
                <p class="label">{{ item.label }}</p>
                <p class="value">{{ item.value }} <span class="unit">{{ item.unit }}</span></p>
            </div>
        </div>
        <div class="cont">
            <div class="item">
                <div class="common-title">
                    <p class="line"></p>
                    <p class="text">储能功率曲线</p>
                </div>
                <div class="chart">
                    <ECharts :option="powerCurveOptions" />
                </div>
            </div>
            <div class="item">
                <div class="common-title">
                    <p class="line"></p>
                    <p class="text">PCS 平均温度曲线</p>
                </div>
                <div class="chart">
                    <ECharts :option="pcsTemperatureOptions" />
                </div>
            </div>
            <div class="item">
                <div class="common-title">
                    <p class="line"></p>
                    <p class="text">电堆平均 SOC</p>
                </div>
                <div class="chart">
                    <ECharts :option="batterySocOptions" />
                </div>
            </div>
            <div class="item">
                <div class="common-title">
                    <p class="line"></p>
                    <p class="text">电堆平均温度</p>
                </div>
                <div class="chart">
                    <ECharts :option="batteryTemperatureOptions" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ECharts from '@/components/ECharts.vue';

const infoItems = ref([
    { label: '储能实时有功功率', value: 2.1, unit: 'kW' },
    { label: '储能实时无功功率', value: -0.6, unit: 'kVar' },
    { label: '电池堆 SOC', value: 100, unit: '%' },
    { label: '储能实时有功功率', value: 99.6, unit: '%' },
    { label: '储能实时有功功率', value: 2664, unit: 'kWh' },
    { label: '储能实时有功功率', value: 0, unit: 'kWh' }
]);

const powerCurveOptions = ref({
    grid: {
        left: '2%',
        right: '5%',
        top: '12%',
        bottom: '13%'
    },
    legend: {
        data: ['2024-08-19  有功功率', '2024-08-19 无功功率', '2024-08-20 有功功率', '2024-08-20 无功功率']
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '02:55', '05:50', '08:45', '11:40', '14:35', '17:30', '20:25', '23:20'],
    },
    yAxis: [{
        name: '功率 / kW'
    },
    {
        name: '无功功率 / kVar',
    }],
    series: [
        {
            name: '2024-08-19  有功功率',
            type: 'line',
            data: [700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-19 无功功率',
            type: 'line',
            yAxisIndex: 1,
            data: [-0.6, 0, -2.1, -3.6, -4.1, -5.6, -6.1, -7.6, -8.1],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-20 有功功率',
            type: 'line',
            data: [813, 913, 1013, 1113, 1213, 1313, 1413, 1513, 1613],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-20 无功功率',
            type: 'line',
            yAxisIndex: 1,
            data: [0, 0, -1.3, -2.8, -3.3, -4.8, -5.3, -6.8, -7.3],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        }
    ]
})
const pcsTemperatureOptions = ref({
    grid: {
        left: '2%',
        right: '5%',
        top: '12%',
        bottom: '13%'
    },
    legend: {
        data: ['2024-08-19  昨日平均温度', '2024-08-20 实时平均温度']
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '02:55', '05:50', '08:45', '11:40', '14:35', '17:30', '20:25', '23:20']
    },
    yAxis: [{
        name: '温度/ °C'
    }],
    series: [
        {
            name: '2024-08-19  昨日平均温度',
            type: 'line',
            data: [39.6, 40.1, 41.6, 42.1, 43.6, 44.1, 45.6, 46.1, 47.6],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-20 实时平均温度',
            type: 'line',
            data: [37.3, 37.8, 38.3, 38.8, 39.3, 39.8, 40.3, 40.8, 41.3],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        }
    ]
})

const batterySocOptions = ref({
    grid: {
        left: '2%',
        right: '5%',
        top: '12%',
        bottom: '13%'
    },
    legend: {
        data: ['2024-08-19  昨日平均SOC', '2024-08-20 实时平均 SOC']
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '02:55', '05:50', '08:45', '11:40', '14:35', '17:30', '20:25', '23:20']
    },
    yAxis: [{
        name: '温度/ °C'
    }],
    series: [
        {
            name: '2024-08-19  昨日平均SOC',
            type: 'line',
            data: [39.6, 40.1, 41.6, 42.1, 43.6, 44.1, 45.6, 46.1, 47.6],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-20 实时平均 SOC',
            type: 'line',
            data: [37.3, 37.8, 38.3, 38.8, 39.3, 39.8, 40.3, 40.8, 41.3],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        }
    ]
})
const batteryTemperatureOptions = ref({
    grid: {
        left: '2%',
        right: '5%',
        top: '12%',
        bottom: '13%'
    },
    legend: {
        data: ['2024-08-19  昨日平均温度', '2024-08-20 实时平均温度']
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '02:55', '05:50', '08:45', '11:40', '14:35', '17:30', '20:25', '23:20']
    },
    yAxis: [{
        name: '温度/ °C'
    }],
    series: [
        {
            name: '2024-08-19  昨日平均温度',
            type: 'line',
            data: [39.6, 40.1, 41.6, 42.1, 43.6, 44.1, 45.6, 46.1, 47.6],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        },
        {
            name: '2024-08-20 实时平均温度',
            type: 'line',
            data: [37.3, 37.8, 38.3, 38.8, 39.3, 39.8, 40.3, 40.8, 41.3],
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                width: 2
            }
        }
    ]
})
</script>

<style lang="scss" scoped>
.realtime-container {
    .info {
        background: #fff;
        border: 1px solid rgba(242, 243, 245, 1);
        box-shadow: 0px 4px 8px 0px rgba(2, 56, 100, 0.15);
        margin-bottom: 0.08rem;
        padding: 0.2rem 0.24rem;
        display: flex;
        justify-content: space-between;

        .item {
            width: 2.64rem;
            height: 0.96rem;
            background: linear-gradient(180deg, #EDF4FF 0%, #FDFEFF 100%);
            border: 1px solid rgba(205, 225, 254, 1);
            border-radius: 0.04rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;

            .label {
                font-size: 0.12rem;
                color: #4D5969;
            }

            .value {
                font-size: 0.34rem;
                font-weight: 700;
                line-height: 1;
                color: #323D4B;

                .unit {
                    font-size: 0.16rem;
                    font-weight: 700;
                    color: #323D4B;
                }
            }
        }
    }

    .cont {
        background: #fff;
        padding: 0.24rem 0.16rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            width: 8.18rem;
            height: 4.14rem;
            border-radius: 0.02rem;
            border: 1px solid #F2F3F5;
            margin-bottom: 0.02rem;
            padding-top: 0.08rem;
        }

        .chart {
            width: 100%;
            height: calc(100% - 0.4rem);
        }
    }
}
</style>
